<template>
<el-button-group>
     <el-button  v-for="item in datedata"  :key="item.v" @click="selchange(item.v)" :class="{ active: index == item.v }">{{item.n}}</el-button>
      <div  v-show="ispicker"  style=" display:inline-block;" >
      <el-date-picker
      v-show="ispicker"
      v-model="pdate"
      type="daterange"
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="width: 230px !important"
      >
    </el-date-picker>
    </div>
 </el-button-group>
 
</template>
<script>
import {getDate} from "@/util/date.js";
export default {
  props: { 
    ispicker: {
      type: Boolean,
      default: true
    },
    defval: {
      type: Number,
      default: -1
    },
    defPdate: {
      type: Array,
      default: function () { return [] }
    },
    initdata: {
      type: Array,
      default: function () { return [] }
    },
  },
  data() {
    return {
      datedata: [],//button快捷选择绑定值
      index:-1,//默认选中值(没有默认拿initData第一个)
      pdate:[],//picker绑定值
    };
  },
 watch: {
    'pdate'() {
       //console.log("pdate:"+this.pdate[0]);
       this.change()
       //处理快捷预选样式
       this.chkActive()
       
    },
       
  },
  mounted() {
    this.index=this.defval;
    let data=[0,1,3,7,30,365];
    if(this.initdata && this.initdata.length>0) 
    {
      data=this.initdata;
    }
    
    for (let i = 0; i < data.length; i++) {
      const e = data[i]
      if(e<0) continue
      const d={v:e,n:this.tabTitle(e)}
      this.datedata.push(d)
    }
    this.pdate=(this.defPdate && this.defPdate.length==2)?this.defPdate : this.tabVal(this.index);
    
  },
   methods: {
     tabTitle(k) {
      let t="";
      switch (k) {
      
        case 0:
          t="今天"
          break;
         case 1:
          t="昨天"
          break;
        case 365:
          t="近一年"
          break;
        default:
          t="近"+ k +"天";
          break;
      }
      return t;
    },
    tabVal(k) {
      let o =[];
      if(k<0) {//不支持负数
        o.push("");
        o.push("");
      }
      else if(k==0){
          o.push(getDate(0));
          o.push(getDate(0));
      }else{
          o.push(getDate(-k));
          o.push(getDate(-1));
      }
      
      return o;
    },
    chkActive(){
      this.index=-1;
      if(!this.pdate) return
      this.datedata.forEach(e=> {
          const val=this.tabVal(e.v);
          if(val[0]==this.pdate[0] && val[1]==this.pdate[1]){
            //console.log("active:"+e.v)
            this.index=e.v;
            return 
          }
      });
    },
     selchange (v) {
      let val=this.tabVal(v);
      this.pdate=val;
    },

    change () {
      let o={start:this.pdate?this.pdate[0]:"",end:this.pdate?this.pdate[1]:""}
      this.$emit('change', o)
    },
    
    reset(){
      this.index=this.defval;
      this.pdate=this.tabVal(this.index);
    },
  },
};
</script>

<style scoped lang="scss">

 .el-button-group .el-button.active {
        background-color: #ecf5ff;
        color: #3a8ee6;
        border-color: #3a8ee6;
        outline: 0;
        z-index: 1;
        
  }
  
 
  
</style>